<template>
    <div class="login">
        <div class="userLogin">
            <h3>用户登录</h3>
            <div>
                <el-input v-model="username"  placeholder="请输入用户名" :prefix-icon="User" />
            </div>
            <div>
                <el-input v-model="password"  placeholder="请输入密码" :prefix-icon="Lock" type="password"/>
            </div>
            <div>
                  <el-button type="primary" block @click="Login" :loading="isloading">{{isloading?'登录中...':'登录'}}</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import userLogin from '../../api/login';
import {ref} from 'vue';
import { Lock,User} from '@element-plus/icons-vue'
import showElemessage from '../../tools/showElemessage'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
// 获取状态管理仓库
let store = useStore();
let router = useRouter();
let username = ref("");
let password = ref("");
// 当前用户登录状态
let isloading = ref(false)
let Login = async ()=>{
    if(!username.value || !password.value){
        showElemessage("请您补充完整信息！",'warning',2000);
        return
    }
    let data={
        username:username.value,
        password:password.value
    }
    isloading.value = true
    let res = await userLogin(data);
    if(res.data.meta.status == 200){
        showElemessage("登录成功","success",2000);
        //将token存储到本地
        localStorage.setItem("token",res.data.data.token)
        // 将token存储到state仓库中
        store.commit("setToken",res.data.data.token)
        router.push({
            path:"/layout"
        })
        return
    }
      showElemessage(res.data.meta.msg,"error",2000);
      isloading.value = false;
}
</script>
<style scoped>
.login {
    width: 100%;
    height: 100vh;
    background: #2d3a4b;
    overflow: hidden;
}

.userLogin {
    width: 340px;
    margin: 150px auto;
}

.userLogin h3 {
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    margin: 0;
}
.el-button{
    width: 100%;
}
.userLogin>div{
   margin-top: 20px;
}
</style>